<template>
    <button class="box" :style="style">
        <slot></slot>
        <div class="dot" :class="type" v-if="isDot"></div>
        <button class="sign"  :class="type" v-else>
            <span v-if="value != null && value != ''">{{value}}</span>
        </button>
    </button>
    
</template>
<script>
import { ref,watch } from 'vue';
export default {
    name:'g-badge',
    props:{
        type:{
            type:String,
            default:'primary'
        },
        value:{
            type:String,
            default:''
        },
        isDot:{
            type:Boolean,
            default:false
        },
        style:{
            type:Object,
            default:{}
        }
    },
    setup(props){
        let type = ref(props.type);
        let value = ref(props.value);
        let isDot = ref(props.isDot);
        let style = ref(props.style);
        
        watch(()=>props,(val)=>{
            type.value = val.type;
            value.value = val.value;
            isDot.value = val.isDot;
            style.value = val.style;
        })


        return {
            type,
            value,
            isDot,
            style
        }
    }
}
</script>
<style scoped>
    .box{
        position: relative;
        border: 1px solid #d9d9d9;
        padding: 8px 15px;
        font-size: 14px;
        border-radius: 3px;
        margin: 15px;
        background: none;
        outline: none;
    }
    .sign{
        position: absolute;
        top:-10px;
        right: -20%;
        height: 20px;
        min-width: 20px;
        font-size: 12px;
        padding: 3px 4px;
        border: none;
        outline: none;
        background-color: #409EFF;
        color: white;
        border-radius: 10px;
    }
    .dot{
        background-color: #409EFF;
        width: 10px;
        height: 10px;
        position: absolute;
        top:-5px;
        right: -5px;
        border-radius: 50%;
    }

    .primary{
        background-color: #409EFF;
    }
    .success{
        background-color: #67C23A;
    }
    .warning{
        background-color: #E6A23C;
    }
    .error{
        background-color: #F56C6C;
    }
</style>